<script setup defer async lang="ts">
import { scanCode, scanCodeResult, getPhoneCode,bindWsList } from '@/api/user'
import { initFaceBook, trackEvent } from '@/utils/facebookService'
import { reactive, nextTick, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'
import { useDraggable } from '@/utils/useDraggable';
import _ from 'lodash'
const statId = ref(null);
	const statTypeExt = ref("");
const { t } = useI18n()
const phoneNumber = ref('91')
const countdown = ref(120)
const sss = ref('Get OTP')
const isCountingDown = ref(false)
const verificationCode = ref('') 
const verificationCodePopupVisible = ref(false) 
const refeshQrIsRun = ref(false)
const scales = reactive({
  step1: false,
  step2: false,
  step3: false,
  step4: false,
})
const currentZoomedImage = ref<string | null>(null)
const chooseVerificationPopupShow = ref(false) 
const chooseValue = ref('') 
const selectedCountry = ref({
  name: 'India',
  code: '+91',
  flag: '????'
})

const countryCodes: Record<number, string> = {
  1: '91',
  2: '62',
  3: '234',
  4: '880',
  5: '92',
}
const videoPopupVisible=ref(false);
	const showVideoPopup=()=>{
		videoPopupVisible.value=true;
	}
  const closeVideoPopup=()=>{
		videoPopupVisible.value=false;
	}

const pagedata = reactive({
  todayPoints: 0,
  totalPoints: 0,
  yesterdayPoints: 0,
  showLoginOut: false,
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
  pagelist: [
    'index/index',
    'scan/index',
    'user/index',
    'withdraw/index',
	'index/invite/invite',
    'user/leaderBoard/index',
    'login/index',
    'user/revenue/revenue',
    'user/withdreawalInfo/withdreawalInfo',
    'user/message/message',
    'user/changPassword/changPassword',
    'user/level/level',
    'user/whatsApp/index',
  ],
})
const pageIndex = ref(4)
const changPage = (e: any) => {
  uni.navigateTo({
    url: '/pages/' + pagedata.pagelist[e],
  })
}
const changMainPage = (e: any) => {
  console.log(getCurrentPages())
  
  uni.navigateTo({
    url: '/pages/' + pagedata.pagelist[e],
  })
}

const closeChooseVerificationPopup = () => {
  chooseVerificationPopupShow.value = false
}

const openVerification = (str: string) => {
  if (str === 'scan') {
    closeChooseVerificationPopup()
    verificationCodePopupVisible.value = false
    
    refeshQr()
  }
  if (str === 'phone') {
    resetAllSetInterval()
    closeChooseVerificationPopup()
    nextTick(() => {
      baseData.show = false
      verificationCodePopupVisible.value = true
    })
  }
}

const handleImageClick = (imageId: string) => {
  if (currentZoomedImage.value === imageId) {
    currentZoomedImage.value = null
  } else {
    currentZoomedImage.value = imageId
  }
}

const handleOverlayClick = () => {
  currentZoomedImage.value = null
}

const closeVerificationCodePopup = () => {
  verificationCodePopupVisible.value = false
  phoneNumber.value = countryCodes[countryNum.value] || '91';
    verificationCode.value=''
	isCountingDown.value=false;
  resetAllSetInterval()
}

const openVerificationCodePopup = () => {
  verificationCodePopupVisible.value = true
}

const codeChange = (value: string) => {
  console.log('Code changed:', value)
}

const codeFinish = (value: string) => {
  console.log('Code completed:', value)
}

const baseData = reactive({
  show: false,
  seeQr: false,
  loadQr: false,
  qrCode: null,
  seconds: 20,
  interTimer: null as number | null,
  randomStr: '',
  showSuccess: false,
  wsAccount: '',
  currentCode: 0, 
  changeCodeTime: 20, 
  changeCodeTimer: null as number | null,
  aTimer: null as number | null,
  verificationTimer: null as number | null,
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
})

const sures = () => {
  baseData.showSuccess = false;
}

const resetAllSetInterval = () => {
  if (baseData.interTimer) {
    clearInterval(baseData.interTimer)
    baseData.interTimer = null
  }
  if (baseData.changeCodeTimer) {
    clearInterval(baseData.changeCodeTimer)
    baseData.changeCodeTimer = null
  }
  if (baseData.aTimer) {
    clearInterval(baseData.aTimer)
    baseData.aTimer = null
  }
  if (baseData.verificationTimer) {
    clearInterval(baseData.verificationTimer)
    baseData.verificationTimer = null
  }
}
const getVerificationCode = () => {
		const regex = /^(?!1)\d+$/;
		
		if (!regex.test(phoneNumber.value)) {
		  uni.showToast({
		    title: t('Prohibit the country code from logging in'),
		    icon: "none"
		  })
		  return;
		}
 if (isCountingDown.value) return;
 _.debounce(startCountdown, 2000)();
}
const startCountdownIsRun = ref(false);
	const startCountdown = async () => {
		if (startCountdownIsRun.value) return;
		try {
			startCountdownIsRun.value = true;
			baseData.randomStr = Date.now().toString(36) + Math.random().toString(36).slice(2, 11);
			const res = await getPhoneCode({
				uuid: baseData.randomStr,
				phone: phoneNumber.value,
			});
			if (res.code === 0) {
				isCountingDown.value = true;
				countdown.value = 120;
				sss.value = `${countdown.value}s`;
				verificationCode.value = res.data.phone_code;
				if (baseData.verificationTimer) {
					clearInterval(baseData.verificationTimer);
					baseData.verificationTimer = null;
				}
				baseData.verificationTimer = setInterval(() => {
					countdown.value--;
					sss.value = `${countdown.value}s`;

					if (countdown.value <= 0) {
						clearInterval(baseData.interTimer);
						baseData.interTimer = null;
						clearInterval(baseData.verificationTimer);
						baseData.verificationTimer = null;
						baseData.verificationTimer = null;
						sss.value = 'Get OTP';
						isCountingDown.value = false;
					}
				}, 2000)
				baseData.interTimer = setInterval(getSuccess, 2000) 
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
			startCountdownIsRun.value = false;
		} catch (error) {
			console.log(error);
		}
	}

const copeVerificationCode = () => {
  uni.setClipboardData({
    data: verificationCode.value,
    success: () => {
      uni.showToast({
        title: t('Copied successfully'),
        icon: 'success',
      })
    },
  })
}

const refeshQr = async () => {
  if (refeshQrIsRun.value) return
  try {
    refeshQrIsRun.value = true
    baseData.randomStr = Date.now().toString(36) + Math.random().toString(36).slice(2, 11)
    const res = await scanCode({ uuid: baseData.randomStr })
    if (res.code == 0) {
      baseData.qrCode = res.data
      baseData.show = true
      baseData.seeQr = true
      baseData.loadQr = true
      baseData.seconds = 20
      baseData.currentCode = 0
      
      if (baseData.interTimer) {
        clearInterval(baseData.interTimer)
        baseData.interTimer = null
      }
      baseData.interTimer = setInterval(() => {
        baseData.seconds--
        if (baseData.seconds <= 0) {
          baseData.seconds = 20
          baseData.currentCode = (baseData.currentCode + 1) % baseData.qrCode.QRCodeEvent.QRCode.length
        }
      }, 2000)
      
      if (baseData.aTimer) {
        clearInterval(baseData.aTimer)
        baseData.aTimer = null
      }
      baseData.aTimer = setInterval(() => {
        getSuccess()
      }, 2000)
    }
  } catch (error) {
    console.error(':', error)
  } finally {
    refeshQrIsRun.value = false
  }
}

const getSuccess = async () => {
  try {
    const res = await scanCodeResult({ uuid: baseData.randomStr })
    if (res.code == 0) {
		if (statTypeExt.value === "2") {
			initFaceBook( statId.value);
		}
		isCountingDown.value=false;
      resetAllSetInterval()
      baseData.seeQr = false
      baseData.show = false
      baseData.loadQr = false
      uni.showToast({
        title: res.data + t('login success'),
      })
      baseData.wsAccount = res.data
      baseData.showSuccess = true
      verificationCodePopupVisible.value = false
      phoneNumber.value = ''
      verificationCode.value = ''
    }
  } catch (error) {
    console.error(':', error)
  }
}

const closePop = () => {
  resetAllSetInterval()
  baseData.show = false
  baseData.seeQr = false
  baseData.loadQr = false
  baseData.currentCode = 0
}
const countryNum=ref(1);

	const openUrl = () => window.open(pagedata.aircraftUrl, '_blank');
const { dragPosition, startDrag } = useDraggable(32, openUrl);
const symbol=ref('$');
const	bindWhatsappNumber=ref(0);
const	onlineWhatsappNumber=ref(0);
const initPage=async()=>{
	const res = await bindWsList()
	if (res.code === 0) {
		 
		  bindWhatsappNumber.value = res.data.length;
		
		  
		  onlineWhatsappNumber.value = res.data.filter(item => item.ws_status === 1).length;
	}
}
onMounted(() => {
	uni.setNavigationBarTitle({
	  title: 'Studio ' + t('Earn money so easy') + '!', 
	})
  countryNum.value=uni.getStorageSync('country');
  phoneNumber.value = countryCodes[countryNum.value] || '91';
  statId.value = uni.getStorageSync('PixelId');
  statTypeExt.value = uni.getStorageSync('typeExt');
  symbol.value= uni.getStorageSync('symbol');
  initPage();
})
</script>

<template>
  <view class="scan-container">
    
    <view class="header-gradient-section">
      <view class="income-display">
        <!-- <text class="income-amount">{{symbol}}0</text> -->
        <text class="income-label"> {{t('WhatsApp Income')}}</text>
        <view class="account-stats-row">
          <text class="stat-text">{{onlineWhatsappNumber}}&nbsp;{{t('account')}}</text>
          <text class="stat-text">{{bindWhatsappNumber}}&nbsp;{{t('account')}}</text>
        </view>
        <view class="status-row">
          <text class="status-text">{{t('Online')}}</text>
          <text class="status-text">{{t('Get')}}</text>
        </view>
      </view>
      
      
      <view class="phone-illustration">
        <img src="@/static/img/top_right.png"/>
      </view>
    </view>

    
    <view class="login-options-section">
		<view class="login-button phone-button" @click="openVerification('phone')">
		  <text class="button-main-text">{{t('Phone Number')}}</text>
		  <text class="button-sub-text"> {{t('Login WhatsApp')}}</text>
		</view>
<!--      <view class="login-button scancode-button" @click="openVerification('scan')">
        <text class="button-main-text">SCANCODE</text>
        <text class="button-sub-text">LOGIN WHATSAPP</text>
      </view> -->

    </view>

    
    <view class="instruction-section">

      <view class="instruction-box">
        <text class="instruction-text">
         {{t(' Log in to WhatsApp successfully to start earning continuously. To ensure your earnings, please keep WhatsApp continuously online')}}.
        </text>
        <text class="instruction-text">
         {{t(' If your status is')}} <text style="color: #ef3723;">"{{t('Offline')}}"</text>,{{t('please re-bind your WhatsApp to go back online and continue earning commissions')}}!
        </text>
      </view>
    </view>

    
    <view class="tutorial-section">
      <view class="tutorial-header">
        <view class="tutorial-title-bar"></view>
        <text class="tutorial-title">{{t('Login Tutortal')}}</text>
      </view>
      
      <view class="tutorial-tabs">
		  <view class="tab-item active">
		    <text class="tab-text ">{{t('Phone Number')}}</text>
			 <view class="tab-underline"></view>
		  </view>
<!--        <view class="tab-item active">
          <text class="tab-text">SCANCODE</text>
         
        </view> -->

      </view>
      
      <view class="video-player">
       <video style="width: 100%; height: 40vh" src="@/static/video/IMG_0128.mp4" controls autoplay></video>
      </view>
    </view>

    
    <view class="bottom-nav">
      <up-tabbar :value="pageIndex" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
        <up-tabbar-item text="" @click="changMainPage(0)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/tutorial.png" mode="aspectFit"></image>
			<text class="nav-text">{{t('Home')}}</text>
          </template>
        </up-tabbar-item>
		<up-tabbar-item text="" @click="changPage(1)">
		  <template #inactive-icon>
		    <image class="nav-icon-img active" src="@/static/img/monetize-s.png" mode="aspectFit"></image>
			<text class="nav-text-active">{{t('Monetize')}}</text>
		  </template>
		</up-tabbar-item>
        <up-tabbar-item text="" @click="changPage(4)">
          <template #inactive-icon>
            <image class="nav-icon-img " src="@/static/img/invite.png" mode="aspectFit"></image>
			<text class="nav-text">{{t('Invite')}}</text>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changMainPage(2)">
          <template #inactive-icon>
            <image class="nav-icon-img " src="@/static/img/mine.png" mode="aspectFit"></image>
			<text class="nav-text">{{t('Me')}}</text>
          </template>
        </up-tabbar-item>
      </up-tabbar>
    </view>

    
    <up-popup
      :show="verificationCodePopupVisible"
      mode="bottom"
      class="custom-width-bottom"
      @close="closeVerificationCodePopup"
      :round="0"
      :closeable="false"
    >
      <view class="phone-login-popup">
        <view class="popup-header">
          <view class="popup-title">{{ t('Bind account') }}</view>
          <view class="popup-close" @click="closeVerificationCodePopup">×</view>
        </view>

        <view class="step-section">
          <view class="step-label">{{ t('1. Enter your WhatsApp phone number:') }}</view>
          
          <view class="phone-input-row">
            <view class="input-container">
              <view class="country-symbol">+</view>
              <input class="phone-input" type="number" :placeholder="t('Please enter')" v-model="phoneNumber" />
            </view>
            
            <up-button
              style="width: 4rem; height: 40px"
              :class="['timer-button']"
              :disabled="isCountingDown"
              :loading="startCountdownIsRun"
              @click="getVerificationCode"
            >
              {{ t('Get key') }}
            </up-button>
          </view>
        </view>

        <view class="step-section">
          <view class="step-label">
            2. {{ t('Open') }}
            <img src="../../static/whatsapp.png" class="inline-icon" />
            {{ t('WhatsApp on your phone, click the link with phone number, and enter this code on your phone') }}!
          </view>
          
          <view class="verification-section">
            <up-code-input
              v-model="verificationCode"
              :maxlength="8"
              @change="codeChange"
              @finish="codeFinish"
              mode="box"
              type="letter-number"
              size="30"
              :space="10"
              :bold="true"
            ></up-code-input>
          </view>
          <view v-show="isCountingDown">
            <view class="copy-btn" @click="copeVerificationCode">{{ t('Copy') }}</view>
            <view class="verification-status">{{ t('Waiting for verification') }}</view>
          </view>
        </view>

        <view class="guide-section">
          <view class="guide-title">{{ t('Login to WhatsApp') }}</view>
          
          <view class="guide-steps">
            <view class="guide-step">
              <text class="step-symbol">1.</text>
              <view class="step-content"> {{ t('Open') }} <text class="bold-text">WhatsApp</text> </view>
            </view>

            <view class="guide-step">
              <text class="step-symbol">2.</text>
              <view class="step-content">
                {{ t('Tap') }} <text class="bold-text">{{ t('Settings') }}</text> ⚙️ <text>({{ t('on iPhone') }})</text> {{ t('or') }}
                <text class="bold-text">{{ t('Menu') }}</text> ⋮ <text>({{ t('on Android') }})</text>
              </view>
            </view>

            <view class="guide-step">
              <text class="step-symbol">3.</text>
              <view class="step-content">
                {{ t('Tap') }} <text class="bold-text">{{ t('Linked Devices') }}</text> {{ t('then') }} <text class="bold-text">{{ t('Link a Device') }}</text>
              </view>
            </view>

            <view class="guide-step">
              <text class="step-symbol">4.</text>
              <view class="step-content"> {{ t('Point your phone at this screen and scan the QR code') }} </view>
            </view>

            <view class="guide-step">
              <text class="step-symbol">5.</text>
              <view class="step-content">
                {{ t('Switch to phone number association, enter verification code') }} <text class="bold-text">77777777</text>
              </view>
            </view>

            <view class="guide-step">
              <text class="step-symbol">6.</text>
              <view class="step-content">
                {{ t('While the conversation is loading, keep both apps open and connected to the network (Wi-Fi, 4G or faster)') }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </up-popup>

    
    <up-popup 
      :show="baseData.showSuccess" 
      mode="center" 
      :round="0"
      :closeable="false"
    >
      <view class="success-popup">
        <view class="success-symbol">✓</view>
        <text class="success-title">{{ t('Login Successful!') }}</text>
        <text class="success-message">{{ t('Welcome back') }}, {{ baseData.wsAccount }}!</text>
        <view class="success-button" @click="sures">
          <text class="success-button-text">{{ t('Continue') }}</text>
        </view>
      </view>
    </up-popup>

    
    <div class="telegram-wrapper">
      <div 
        class="telegram-icon"
        @mousedown="startDrag"
        @touchstart="startDrag"
        :style="{
          top: dragPosition.y + 'px',
          left: dragPosition.x + 'px',
          zIndex: '99999',
          position: 'fixed'
        }"
      >
        <img style="width: 2rem; height: 2rem;" src="@/static/teltgram.png" />
      </div>
    </div>
  </view>
</template>

<style lang="scss" scoped>
.scan-container {
  min-height: 100vh;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  padding-bottom: 5px;
}


.header-gradient-section {
 background-image: url("@/static/img/record_top.png");
     background-size: 100% 100%;
  padding: 10px 10px 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 200px;
}

.income-display {
  flex: 1;
  
  .income-amount {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 8px;
  }
  
  .income-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #66BB6A;
    margin-bottom: 16px;
  }
  
  .account-stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 8px;
    
    .stat-text {
      font-size: 14px;
      color: #81C784;
      font-weight: 500;
    }
  }
  
  .status-row {
    display: flex;
    gap: 20px;
    
    .status-text {
      font-size: 14px;
      color: #81C784;
      font-weight: 500;
    }
  }
}

.phone-illustration {
  
  
  position: relative;
  
  img{
	  width: 150px;
	  height: 150px;
  }
}


.login-options-section {
  padding: 20px 30px;
  display: flex;
  gap: 15px;
}

.login-button {
  flex: 1;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  
  .button-main-text {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  
  .button-sub-text {
    display: block;
    font-size: 12px;
    font-weight: 500;
  }
}

.scancode-button {
  background: linear-gradient(to bottom,#23fbfb,#29e692);
  
  .button-main-text,
  .button-sub-text {
    color: #000000;
  }
}

.phone-button {
  background: linear-gradient(to bottom,#93f94e,#faf859);
  
  .button-main-text,
  .button-sub-text {
    color: #000000;
  }
}


.instruction-section {
  margin: 0px 30px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  
}


.instruction-box {
  flex: 1;
  background: #e8f5e8;
  padding: 15px;
  border-radius: 12px;
  
  .instruction-text {
    display: block;
    font-size: 14px;
    color: #333333;
    line-height: 1.5;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}


.tutorial-section {
  margin: 5px 30px 100px;
}

.tutorial-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  
  .tutorial-title-bar {
    width: 8px;
    height: 20px;
    background:linear-gradient(to right, rgb(147, 249, 78), rgb(250, 248, 89)) 0% 0% / cover;
    border-radius: 2px;
  }
  
  .tutorial-title {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
  }
}

.tutorial-tabs {
  display: flex;
  gap: 30px;
  margin-bottom: 15px;
  
  .tab-item {
    position: relative;
    cursor: pointer;
    
    .tab-text {
      font-size: 16px;
      font-weight: 700;
      color: #333333;
    }
    
    &.active {
      
      
      
      
      .tab-underline {
        position: absolute;
        bottom: -8px;
        left: 0;
        right: 0;
        height: 4px;
        background:linear-gradient(to right, rgb(147, 249, 78), rgb(250, 248, 89)) 0% 0% / cover ;
        border-radius: 1px;
      }
    }
  }
}

.video-player {
  
  
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  

}

::v-deep .u-tabbar .u-tabbar__content{
	 background: linear-gradient(90deg,#32c66f,#007f8d)!important ;
}
::v-deep{
	.u-tabbar-item__icon{
		display: flex;
		    flex-direction: column;
		    position: relative;
		    width: 4.6875rem;
		    justify-content: space-evenly;
		    align-content: stretch;
		    align-items: center;
	}
}


.phone-login-popup {
  background: white;
  padding: 30px;
  min-height: 60vh;
  max-height: 60vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  
  .popup-title {
    font-size: 20px;
    font-weight: 700;
    color: #2E7D32;
  }
  
  .popup-close {
    width: 30px;
    height: 30px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666;
    cursor: pointer;
  }
}

.step-section {
  margin-bottom: 30px;
  
  .step-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.5;
    
    .inline-icon {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      margin: 0 5px;
    }
  }
  
  .phone-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    
    .input-container {
      flex: 1;
      display: flex;
      align-items: center;
      background: #f8f8f8;
      border-radius: 8px;
      border: 1px solid #e0e0e0;
      
      .country-symbol {
        padding: 12px 15px;
        font-size: 16px;
        color: #666;
        border-right: 1px solid #e0e0e0;
      }
      
      .phone-input {
        flex: 1;
        padding: 12px 15px;
        font-size: 16px;
        border: none;
        background: transparent;
        color: #333;
      }
    }
    
    .timer-button {
      background: #4CAF50 !important;
      color: white !important;
      border-radius: 8px !important;
      padding: 12px 20px !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      min-width: 100px !important;
      height: auto !important;
      border: none !important;
      
      &:disabled {
        background: #ccc !important;
        color: #666 !important;
      }
    }
  }
  
  .verification-section {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }
  
  .copy-btn {
    color: #4CAF50;
    text-align: center;
    margin: 15px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
  }
  
  .verification-status {
    color: #666;
    text-align: center;
    margin: 15px 0;
    font-size: 14px;
  }
}

.guide-section {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 20px;
  
  .guide-title {
    font-size: 18px;
    font-weight: 700;
    color: #2E7D32;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .guide-steps {
    .guide-step {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
      
      .step-symbol {
        width: 20px;
        font-weight: 700;
        color: #4CAF50;
        flex-shrink: 0;
      }
      
      .step-content {
        flex: 1;
        color: #333;
        font-size: 14px;
        line-height: 1.5;
        
        .bold-text {
          font-weight: 700;
          color: #2E7D32;
        }
      }
    }
  }
}


.success-popup {
  background: white;
  border-radius: 12px;
  padding: 40px 30px;
  text-align: center;
  width: 300px;
  max-width: 90vw;
  
  .success-symbol {
    font-size: 60px;
    margin-bottom: 20px;
    color: #4CAF50;
  }
  
  .success-title {
    font-size: 20px;
    font-weight: 700;
    color: #2E7D32;
    margin-bottom: 15px;
    display: block;
  }
  
  .success-message {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    display: block;
  }
  
  .success-button {
    background: #4CAF50;
    color: white;
    border-radius: 8px;
    padding: 15px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
    }
    
    .success-button-text {
      font-size: 16px;
      font-weight: 600;
    }
  }
}

</style>